<template>
  <div class="article-list">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-if="list.length==0" class="list-nodate">暂无数据</div>
        <div v-for="item in list" :key="item.id" class="record-cell" @click="goDetail(item)">
          <div class="left">
            <img class="img" :src="item.firstImage|imgPath" alt srcset>
          </div>
          <div class="right">
            <div class="title">{{item.title}}</div>
            <div class="date">
                <div class="date-left">
                  <van-icon name="play-circle-o"/>
                  <span>{{item.countComment||0}}次播放量</span>
                </div>
                <div v-if="item.learnedProc">已学习{{item.learnedProc||0}}%</div>
                <div v-else>未学习</div>
              </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import articleCell from '@/components/article-cell'

export default {
  props: ['type', 'cate'],
  components: {
    articleCell
  },
  data () {
    return {
      page: 1,
      limit: 20,
      isLoading: false,
      loading: false,
      finished: false,
      list: []
    }
  },
  methods: {
    onRefresh () {
      this.page = 1
      this.finished = false
      this.getList(list => {
        this.list = list
        this.isLoading = false
      })
    },
    onLoad () {
      this.getList(list => {
        this.loading = false
        if (list.length < this.limit) {
          this.finished = true
        }
        if (this.page === 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        this.page++
      })
    },
    goDetail (item) {
      const { id, typeId } = item
      const type = typeId === 1 ? 'video' : 'file'
      this.$router.push({
        path: `/study-center/detail/${type}/${id}`
      })
    },
    getList (callback) {
      // 学习记录
      this.$axios
        .get('/xbkj-dj/web/edu/course/list', {
          type: this.type,
          cateId: this.cate,
          current: this.page,
          size: this.limit
        })
        .then(res => {
          callback && callback(res.data.records)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.article-list {
  background-color: #fff;
  // padding: 0 20px;
  .list-nodate {
    height: 116px;
    text-align: center;
    line-height: 116px;
    font-size: 14px;
    color: #ccc;
  }
}
.record-cell {
  display: flex;
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #e9e9e9;
  background-color: #fff;
  box-sizing: border-box;
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 5px;
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /*! autoprefixer: off*/
      -webkit-box-orient: vertical;
      /* autoprefixer: on*/
      -webkit-line-clamp: 2;
      font-size: 14px;
    }
    .date {
      font-size: 12px;
      color: #999;
      display: flex;
      justify-content: space-between;
      .date-left > * {
        vertical-align: middle;
      }
    }
  }
  .left {
    flex: 0 0 115px;
    width: 115px;
    height: 75px;
    margin-right: 8px;
    .img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }
}
</style>
